import { Component, Input, OnInit } from '@angular/core'
import { FormGroup } from '@angular/forms'

import { FieldBase } from './field-base.interface'
import { ObservableStore } from '@shared/classes/ObservableStoreClass'
import { DataService } from '@shared/services/data.service'

@Component({
  selector: 'app-field',
  templateUrl: './channel-form-field.component.html',
  styleUrls: ['./channel-form-field.component.less'],
})
export class ChannelFormFieldComponent implements OnInit {
  isPayNearby: boolean
  constructor(
    private dataService: DataService
  ) {}

  get isInvalid(): boolean {
    const control = this.form.controls[this.field.key]

    if (!control) {
      return false
    }

    if (!control.dirty) {
      return false
    }

    return control.invalid
  }
  public showShopId$: ObservableStore<boolean> = new ObservableStore(true)

  @Input() field: FieldBase<any>
  @Input() form: FormGroup

  ngOnInit() {
    this.dataService.showShop$.value$.subscribe(res => {
      this.isPayNearby = res
    })

  }

  formatterPercent = (value: number) => `${value} %`
  parserPercent = (value: string) => value.replace(' %', '')

  onModelChange(value: any) {
    const cb = this.field.onModelChange
    if (cb && typeof cb === 'function') {
      this.field.onModelChange(value, this.form)
    }
  }
}
